<template>
  <div class="warn-container" v-loading="loading">
    
    <div v-for="item in warnList" :key="item.id">
      <router-link class="warn-item" target="_blank" :to="{ path: '/warning/detail', query: { id: item.id } }">
        <div class="left" v-if="item.fileAddress">
          <img :src="getShotcutImg(item.fileAddress)" alt="" />
        </div>
        <div class="left" v-else>
          <img src="@/assets/images/shipping-online/ship.png" alt="" />
        </div>
        <div class="right">
          <div class="top">
            <div class="top-left" :title="getWarnType(item.type)">{{ getWarnType(item.type) }}</div>
            <div
              class="top-right yellow"
              :class="[
                item.status === 0
                  ? 'yellow'
                  : item.status === 2
                  ? 'red'
                  : item.status === 1
                  ? 'red'
                  : item.status === 5
                  ? 'blue'
                  : 'gray',
                'top-right'
              ]"
            >
              {{ getStatusText(item.status) }}
            </div>
          </div>
          <div class="middle" :title="item.tenantName">{{ item.tenantName }}</div>
          <div class="middle" :title="item.warningNo">{{ item.warningNo?item.warningNo:"--" }}</div>
          <div class="bottom">
            <div class="bottom-left">
              <div class="icon">
                <!-- <img src="@/assets/img/warnMessage/time.png" alt="" /> -->
                <span class="iconfont icon-time"></span>
              </div>
              <div class="time">{{ item.createTime || '--' }}</div>
            </div>
            <div class="bottom-right">
              <div class="icon">
                <img src="@/assets/images/shipping-online/warn-1.png" alt="" v-if="item.level == 1" />
                <img src="@/assets/images/shipping-online/warn-2.png" alt="" v-if="item.level == 2" />
                <img src="@/assets/images/shipping-online/warn-3.png" alt="" v-if="item.level == 3" />
              </div>
            </div>
          </div>
        </div>
    </router-link>
    </div>
  </div>
</template>
<script>
import {
  getVideoWarnTypes
} from "@/api/video";
import {
  getVideoWarnList
} from "@/api/ship";
const statusDic = [
  {
    lable: '待确警',
    value: 0
  },
  {
    lable: '待处理',
    value: 1
  },
  {
    lable: '待处理',
    value: 2
  },
  {
    lable: '误警',
    value: 3
  },
  {
    lable: '误警',
    value: 4
  },
  {
    lable: '已处理',
    value: 5
  }
]
export default {
  props:{
    shipInfo: {
      type: Object,
    },
  },
  data(){
    return {
      warnList:[
      ],
      warnTypeDict:[],
      loading:false,
    }
  },
  mounted() {
    this.initData();
  },
  methods:{
    
    async initData(){
      this.loading = true;
      // 先确保字典数据加载完成
      const {result} = await getVideoWarnTypes();
      if (result && result.length > 0) {
        this.warnTypeDict = result.map(val=>{
          return {
            lable: val.warningModelName,
            value: val.warningModelCode
          }
        });
      }
      getVideoWarnList({
        shipId:this.shipInfo.shipId,
        warningFlag:true,
      }).then(res=>{
        if(res.result && res.result.length > 0){
          this.warnList = res.result;
        }
        this.loading = false;
      })
    },
    getWarnType(typeCode) {
      return this.getDictLabel(typeCode,this.warnTypeDict)
    },
    getStatusText(statusCode){
      return this.getDictLabel(statusCode,statusDic)

    },
    getDictLabel(code,dictList) {
      let label = "";
      const dict = dictList.find(val => val.value == code)
      if (dict) {
        label = dict.lable;
      }
      return label;
    },
    getShotcutImg(imgUrl) {
      return `${process.env.VUE_APP_MINIO}${this.$setting.downloadUrl}?objectName=` +
        encodeURIComponent(imgUrl)
    },
    handleToPage(value) {
      this.$router.replace(`/warning/detail?id=${value.id}`)
    }
  }
}
</script>

<style lang="scss">
.warn-container {
  padding:10px 10px 0px 10px;
  background: #F5F7FA;
  box-sizing: border-box;
  height: 382px;
  overflow: auto;
  &::-webkit-scrollbar-track-piece {
    background: #ffffff;
  }
  &::-webkit-scrollbar-thumb {
    background: #ebeef5;
    border-radius: 20px;
  }
  &::-webkit-scrollbar {
    width: 4px;
    height: 10px;
  }
  
  .warn-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    margin-bottom: 10px;
    .left {
      width: 153px;
      height: 86px;
      border-radius: 6px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .right {
      flex: 1;
      margin-left: 20px;
      .top {
        padding-top: 4px;
        margin-bottom: 3px;
        display: flex;
        font-size: 16px;
        color: #333;
        justify-content: space-between;
        align-items: center;
        .top-left {
          max-width: 136px;
          overflow-x: hidden;
          text-overflow: ellipsis;
          box-sizing: border-box;
          scrollbar-width: none;
          -ms-overflow-style: none; /* 禁用 IE 和 Edge 的滚动条 */
        }
        .top-right {
          font-size: 12px;

          max-width: 30%;
        }
        .top-left::-webkit-scrollbar,
        .top-right::-webkit-scrollbar {
          display: none; /* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
        }
        .yellow {
          color: #e99d42;
        }
        .red {
          color: #cb343a;
        }
        .gray {
          color: #a7a7a7;
        }
        .blue {
          color: #3a82e4;
        }
      }
      .middle {
        max-width: 190px;
        font-size: 14px;
        color: #777777;
        margin-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        scrollbar-width: none;
        -ms-overflow-style: none; /* 禁用 IE 和 Edge 的滚动条 */
      }
      .middle::-webkit-scrollbar {
        display: none; /* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
      }
      .bottom {
        font-size: 12px;
        color: #aaaaaa;
        display: flex;
        justify-content: space-between;
        .icon {
          width: 12px;
          height: 12px;
          // background: pink;
          img {
            width: 100%;
          }
        }
        .bottom-left {
          display: flex;
          .icon {
            margin-right: 10px;
          }
        }
        .bottom-right {
        }
      }
    }






  }
}

</style>
